<template>
	<view class="nt-card">
		<view class="nt-card-header" v-if="label">
			<view class="nt-card-header__label">
				{{label}}
				<text class="nt-card-header__sub" v-if="sub">{{sub}}</text>
			</view>
			<view class="nt-card-header__desc">
				{{ desc }}
				<slot name="button"></slot>
			</view>
		</view>
		<view class="nt-card-body">
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		label: {
			type: String,
			default: ""
		},
		sub: {
			type: String,
			default: ""
		},
		desc: {
			type: String,
			default: ""
		}
	},
	data() {
		return {
			
		}
	}
}
</script>

<style lang="scss" scoped>
.nt-card{
	background:#fff;
	padding: 20rpx;
	overflow: hidden;
	&-header{
		height: 60rpx;
		line-height: 60rpx;
		position: relative;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		display:flex;
		align-items: center;
		justify-content: space-between;
		// margin-bottom: 10rpx;
		&::before{
			content: "";
			display: block;
			overflow: hidden;
			width: 28rpx;
			border-radius: 30rpx;
			height: 45rpx;
			position: absolute;
			left: -39rpx;
			top: 50%;
			transform: translateY(-50%);
			background: var(--theme-color);
		}
		&__desc{
			font-size: 28rpx;
			color:#666;
			font-weight: normal;
		}
	}
}
</style>